<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单信息</title>
    <link rel="stylesheet" type="text/css" href="css/models.css">
    <!--弹窗 css文件-->
    <link rel="stylesheet" type="text/css" href="js/layer/layer.css">
</head>
<body>
<div class="MainContent">
    <!--面包屑-->
    <div class="current">当前位置：<a href="#">订单管理</a>&nbsp;&gt;&nbsp;<a href="#">进货订单</a>&nbsp;&gt;&nbsp;<span>订单信息</span> </div>
    <!--end 面包屑-->
    <!--主体内容-->
    <div class="MainCont">
        <!--标题-->
        <div class="ph_subTit no_border">
            <h2>订单信息</h2>
        </div>
        <!--end 标题-->
        <!--订单信息状态-->
        <div class="ph_infoFlow">
            <p class="ph_infoLine"><span class="ph_fault ph_green"></span><span class="ph_fault"></span><span class="ph_fault"></span></p>
            <ul class="ph_infoList">
                <li>
                    <i class="ph_infoIco ph_infoPos"></i>
                    <p class="ph_infoTit">提交订单</p>
                    <p class="ph_infoDay">2017-03-20 18:03:02</p>
                </li>
                <li>
                    <i class="ph_infoIco ph_infoPos"></i>
                    <p class="ph_infoTit">付款成功</p>
                    <p class="ph_infoDay">2017-03-20 18:03:02</p>
                </li>
                <li>
                    <i class="ph_infoIco"></i>
                    <p class="ph_infoTit">商品发货</p>
                    <p class="ph_infoDay"></p>
                </li>
                <li>
                    <i class="ph_infoIco"></i>
                    <p class="ph_infoTit">收货完成</p>
                    <p class="ph_infoDay"></p>
                </li>
            </ul>
        </div>
        <!--end 订单信息状态-->
        <!--订单角色信息-->
        <div class="ph_infoCon">
            <p class="ph_infoHome"><span>进货商ID：admin</span><span>进货商名称：红彤彤企业有限公司</span></p>
            <p class="ph_infoDel"><span>收货人：陈强</span><span>联系电话：124****4525</span><span>收货地址：重庆市江北区国金中心t2-2901</span></p>
        </div>
        <div class="ph_infoCon">
            <p class="ph_infoHome"><span>供应商ID：admin</span><span>供应商名称：法网科技有限公司</span></p>
            <p class="ph_infoDel"><span>收货人：陈强</span><span>联系电话：124****4525</span><span>收货地址：重庆市江北区国金中心t2-2901</span></p>
        </div>
        <!--end 订单角色信息-->
        <!--标题-->
        <div class="ph_subTit no_border">
            <h2>商品信息</h2>
        </div>
        <!--end 标题-->
        <!--商品信息-->
        <div class="ph_wareBox ph_infoWare">
            <p>订单号:PHMO01201771004422990178</p>
            <table class="ph_wareList">
                <thead>
                    <tr>
                        <th width="50">序号</th>
                        <th>商品名称</th>
                        <th>商品数量</th>
                        <th>商品总额（元）</th>
                        <th>物流总额（元）</th>
                        <th>总金额（元）</th>
                        <th>规格</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td title="">测试商品 <br>红色-大号2</td>
                        <td title="">2</td>
                        <td title="">500.00</td>
                        <td title="">5.00</td>
                        <td title="">1005.00</td>
                        <td><a class="lookBtn ph_lookBtn" href="javascript:void(0);">查看</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td title="">测试商品 <br>红色-大号2</td>
                        <td title="">2</td>
                        <td title="">500.00</td>
                        <td title="">5.00</td>
                        <td title="">1005.00</td>
                        <td><a class="lookBtn ph_lookBtn" href="javascript:void(0);">查看</a></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td title="">测试商品 <br>红色-大号2</td>
                        <td title="">2</td>
                        <td title="">500.00</td>
                        <td title="">5.00</td>
                        <td title="">1005.00</td>
                        <td><a class="lookBtn ph_lookBtn" href="javascript:void(0);">查看</a></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td title="">测试商品 <br>红色-大号2</td>
                        <td title="">2</td>
                        <td title="">500.00</td>
                        <td title="">5.00</td>
                        <td title="">1005.00</td>
                        <td><a class="lookBtn ph_lookBtn" href="javascript:void(0);">查看</a></td>
                    </tr>
                </tbody>
            </table>
            <p class="ph_infoTotal ">商品总额：<span class="require">2000</span>&nbsp;&nbsp;&nbsp;&nbsp;快递费用：<span class="require">10</span></p>
            <p class="ph_infoTotal ph_infoLarge">总计：<span class="require">2010</span></p>
        </div>
        <!--end 商品信息-->
        <!--返回按钮-->
        <div class="PopupBtn">
            <input name="" type="button" value="返回">
        </div>
        <!--end 返回按钮-->
    </div>
    <!--end 主体内容-->
</div>
<!--遮罩层-->
<div class="maskBox"></div>
<!--end 遮罩层-->

<!--查看规格弹窗-->
<div class="PopupBox" id="ph_lookBox">
    <!--内容-->
    <div class="PopupCon">
        <div class="lookCon ph_wareBox">
            <table class="ph_wareList">
                <thead>
                <tr>
                    <th>规格</th>
                    <th>参考价（元）</th>
                    <th>零售价（元）</th>
                    <th>进货价（元）</th>
                    <th>结算价（元）</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>红色-大号</td>
                    <td>5.00</td>
                    <td title="--">5.00</td>
                    <td title="--">5.00</td>
                    <td>4.00</td>
                </tr>
                <tr>
                    <td>红色-小号</td>
                    <td>3.00</td>
                    <td title="--">3.00</td>
                    <td title="--">3.00</td>
                    <td>2.00</td>
                </tr>
                <tr>
                    <td>红色-大号</td>
                    <td>5.00</td>
                    <td title="--">5.00</td>
                    <td title="--">5.00</td>
                    <td>4.00</td>
                </tr>
                <tr>
                    <td>红色-大号</td>
                    <td>5.00</td>
                    <td title="--">5.00</td>
                    <td title="--">5.00</td>
                    <td>4.00</td>
                </tr>
                <tr>
                    <td>红色-小号</td>
                    <td>3.00</td>
                    <td title="--">3.00</td>
                    <td title="--">3.00</td>
                    <td>2.00</td>
                </tr>
                <tr>
                    <td>红色-大号</td>
                    <td>5.00</td>
                    <td title="--">5.00</td>
                    <td title="--">5.00</td>
                    <td>4.00</td>
                </tr>
                <tr>
                    <td>红色-大号</td>
                    <td>5.00</td>
                    <td title="--">5.00</td>
                    <td title="--">5.00</td>
                    <td>4.00</td>
                </tr>
                </tbody>
            </table>
        </div>
        <p class="ph_lookTxt">商品总量：<span class="require">5</span>&nbsp;&nbsp;商品总额：<span class="require">19.00</span>&nbsp;&nbsp;物流总费：<span class="require">2.00</span>&nbsp;&nbsp;总金额：<span class="require">21.00元</span></p>
    </div>
    <!--end 内容-->
</div>
<!--end 查看规格弹窗-->

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--弹窗-->
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript">
    $(function() {
        $('.ph_wareBox').on('click','.lookBtn',function(){
            layer.open({
                type: 1,
                title: '查看规格',
                closeBtn : 0,
                area: ['666px','400px'],
                btn:['取消'],
                btnAlign: 'c',
                content: $('#ph_lookBox')
            });
        });
    });
</script>
</body>
</html>